<template>
  <div>
    <m-form
      :options="options"
      label-width="100px"
      @on-change="handleChange"
      @before-upload="handleBeforeUpload"
      @on-preview="handlePreview"
      @on-remove="handleRemove"
      @before-remove="beforeRemove"
      @on-success="handleSuccess"
      @on-error="handleError"
      @on-exceed="handleExceed"
    >
      <template #uploadArea>
        <el-button size="small" type="primary">Click to upload</el-button>
      </template>
      <template #uploadTip>
        <div style="color: #ccc; font-size: 12px">
          jpg/png files with a size less than 500kb
        </div>
      </template>

      <template #action="{ form, model }">
        <el-button type="primary" @click="submitForm(form, model)">
          Create
        </el-button>
        <el-button @click="resetForm(form)">Reset</el-button>
      </template>
    </m-form>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { FormOptionsVO } from "@/components/form/src/types/types";
import type { FormInstance } from "element-plus";

let options: FormOptionsVO[] = [
  {
    type: "input",
    value: "",
    label: "姓名",
    prop: "name",
    rules: [
      {
        required: true,
        message: "请输入姓名",
        trigger: "blur",
      },
    ],
    placeholder: "请输入姓名",
    attrs: {
      clearable: true,
    },
  },
  {
    type: "input",
    label: "密码",
    value: "",
    prop: "password",
    rules: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
      {
        min: 6,
        max: 15,
        message: "密码长度在6-15个字符之间",
        trigger: "blur",
      },
    ],
    placeholder: "请输入密码",
    attrs: {
      clearable: true,
      showPassword: true,
    },
  },
  {
    type: "select",
    label: "职位",
    value: "1",
    prop: "job",
    rules: [
      {
        required: true,
        message: "请选择",
        trigger: "change",
      },
    ],
    placeholder: "请选择",
    attrs: {
      clearable: true,
      style: {
        width: "100%",
      },
    },
    children: [
      {
        type: "option",
        label: "前端",
        value: "1",
      },
      {
        type: "option",
        label: "后端",
        value: "2",
      },
      {
        type: "option",
        label: "UI",
        value: "3",
      },
    ],
  },
  {
    type: "checkbox-group",
    label: "爱好",
    value: [],
    prop: "like",
    rules: [
      {
        required: true,
        message: "请选择",
        trigger: "change",
      },
    ],
    placeholder: "请选择",
    attrs: {
      clearable: true,
      style: {
        width: "100%",
      },
    },
    children: [
      {
        type: "checkbox",
        label: "篮球",
        value: "1",
      },
      {
        type: "checkbox",
        label: "足球",
        value: "2",
      },
      {
        type: "checkbox",
        label: "羽毛球",
        value: "3",
      },
    ],
  },
  {
    type: "radio-group",
    label: "性别",
    value: "",
    prop: "sex",
    rules: [
      {
        required: true,
        message: "请选择",
        trigger: "change",
      },
    ],
    placeholder: "请选择",
    attrs: {
      clearable: true,
      style: {
        width: "100%",
      },
    },
    children: [
      {
        type: "radio",
        label: "男",
        value: "male",
      },
      {
        type: "radio",
        label: "女",
        value: "female",
      },
      {
        type: "radio",
        label: "未知",
        value: "unknown",
      },
    ],
  },
  {
    type: "upload",
    label: "文件",
    prop: "pic",
    value: [
      {
        name: "element-plus-logo.svg",
        url: "https://element-plus.org/images/element-plus-logo.svg",
      },
      {
        name: "element-plus-logo2.svg",
        url: "https://element-plus.org/images/element-plus-logo.svg",
      },
    ],
    uploadAttrs: {
      action: "https://jsonplaceholder.typicode.com/posts/",
      multiple: true,
      limit: 3,
    },
    rules: [
      {
        required: true,
        message: "图片不能为空",
        trigger: "blur",
      },
    ],
  },
  {
    type: "upload",
    label: "文件",
    prop: "pic2",
    value: [],
    uploadAttrs: {
      action: "#",
      multiple: true,
      limit: 3,
      autoUpload: false,
    },
    rules: [
      {
        required: true,
        message: "图片不能为空",
        trigger: "blur",
      },
    ],
  },
  {
    type: "editor",
    label: "富文本",
    prop: "content",
    value: "",
    editorConfig: {
      placeholder: "请输入内容",
    },
    rules: [
      {
        required: true,
        message: "请输入内容",
        trigger: "blur",
      },
    ],
  },
];

const submitForm = (form: FormInstance, model: any) => {
  form.validate((valid) => {
    if (valid) {
      console.log(model);
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};

const resetForm = (form: FormInstance) => {
  form.resetFields();
};

// 上传组件的方法
let handleRemove = (file: any, fileList: any) => {
  console.log("handleRemove");
  console.log(file, fileList);
};
let handlePreview = (file: any) => {
  console.log("handlePreview");
  console.log(file);
};
let beforeRemove = (val: any) => {
  console.log("beforeRemove");
  return ElMessageBox.confirm(`Cancel the transfert of ${val.file.name} ?`);
};
let handleExceed = (val: any) => {
  console.log("handleExceed", val);
  ElMessage.warning(
    `The limit is 3, you selected ${
      val.files.length
    } files this time, add up to ${
      val.files.length + val.fileList.length
    } totally`
  );
};
let handleSuccess = (val: any) => {
  console.log("success");
  console.log(val);
};
let handleError = ({ err, file, fileList }) => {
  console.log("error");
  console.log(err, file, fileList);
};
let handleChange = (val: any) => {
  console.log("change");
  console.log(val);
};
let handleBeforeUpload = (val: any) => {
  console.log("handleBeforeUpload");
  console.log(val);
};
</script>

<style scoped></style>
